<template>
  <div id="tab-bar-item" v-on:click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon">
      </slot>
    </div>
    <div v-else>
      <slot name="item-icon-active">
      </slot>
    </div>
    <div :style="textColor">
      <slot name="item-text">
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props:{
    path: {
      type:String
    },
    activeColor:{
      type:String,
      default:"red"
    }
  },
  data() {
    return {
      // isActive:false
    }
  },
  methods: {
    itemClick(){
      console.log("this.path",this.path)
      if (this.$route.path!=this.path){
        this.$router.push(this.path)
      }
    },
  },
  watch:{
    $route(v){
      console.log(v)
      // console.log("888",v.path,this.path)
    }
  },
  computed:{
    isActive(){
      return this.$route.path == this.path
    },
    textColor(){
      if (this.isActive){
        return {color:"red"}
      }
      return {}
    }
    // isActive(){
    //   console.log(this.$route.path,this.path)
    //   return this.$route.path == this.path
    //   // return this.$route.path.indexOf(this.path) !== -1
    // },

  },
  mounted() {
    console.log("ttt",this.path)
  }
}
</script>

<style scoped>
#tab-bar-item {
  flex: auto;
  text-align: center;
}

#tab-bar-item img {
  height: 24px;
  width: 24px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}
</style>